<template>
  <div class="addCamera">
    <el-button v-if="showBtn" @click="handleClick" v-bind="$attrs">
      <slot>新增</slot>
    </el-button>
    <el-dialog class="d1" :title="title" :visible.sync="visible" append-to-body width="400px" @close="onClose">
      <el-form ref="form" v-loading="loading" label-width="100px" size="mini">

        <el-form-item label="推送内容：" v-if="isText">
          {{form.message}}
        </el-form-item>

        <el-form-item label="推送内容：" v-if="isCard">
          <el-form label-position="right" label-width="80px" :model="cardContent">
            <el-form-item v-for="(item, index) in cardContent" :key="index" :label="item.title">
              {{item.value}}
            </el-form-item>
          </el-form>
        </el-form-item>
        <el-form-item label="推送时间：">
          {{handleTimeFarmat(form.sendTime)}}
        </el-form-item>
        <el-form-item label="推送人：">
          {{subscriberManDetail(form.slopeSubscribers)}}
        </el-form-item>
        <!-- <el-form-item label="告警检测项：">
          {{form.alarm.monitorItem.itemName}}
        </el-form-item>
        <el-form-item label="告警阈值：">
          {{form.alarm.alarmThreadhold}}
        </el-form-item>
        <el-form-item label="告警实测值：">
          {{form.alarm.alarmValue}}
        </el-form-item>
        <el-form-item label="告警级别：">
          {{form.alarm.alarmLevel=='1'?'一级告警':form.alarm.alarmLevel=='2'?'二级告警':'三级告警'}}
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :type="isText?'':'primary'" @click="showCard()">显示卡片</el-button>
        <el-button :type="isCard?'':'primary'" @click="showText()">显示原文</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props: {
      showBtn: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        loading: false,
        visible: false,
        title: "",
        form: {},
        isText: true,
        isCard: false,
        cardContent: undefined,
      };
    },
    methods: {
      onClose() {
        this.visible = false;
      },
      handleAreachange(s) {
        console.log(s);
      },
      async handleClick({
        info,
        title,
        submit
      }) {
        let self = this;
        self.form = { ...info
        } || {};
        console.log(self.form);
        self.title = title || "";
        self.submit = submit || (() => {});
        self.visible = true;
        await self.$nextTick();
        self.$refs["form"].clearValidate();
      },
      //时间格式处理
      handleTimeFarmat(val) {
        if (val != null && val != '') {
          return val.substring(0, 10) + " " + val.substring(11, 19);
        } else {
          return "";
        }
      },
      subscriberManDetail(slopeSubscribers) {
        var str = "  \n";
        if (slopeSubscribers && slopeSubscribers.length > 0) {
          for (var i = 0; i < slopeSubscribers.length; i++) {
            str += slopeSubscribers[i].subscribeNickName + " ";
          }
          return str;
        }
      },
      showCard() {
        let self = this;
        if (self.cardContent == undefined) {
          let content = self.form.message.split('，');
          let testItemLevel = content[3].split('当前处于');
          self.cardContent = [{
            "title": '时间:',
            "value": content[0],
          },{
            "title": '设备:',
            "value": content[1].substring(0,content[1].length-2),
          },{
            "title": '编号:',
            "value": content[2].substring(2),
          },{
            "title": '检测项:',
            "value": testItemLevel[0],
          },{
            "title": '告警等级:',
            "value": testItemLevel[1],
          },{
            "title": '监测值:',
            "value": content[4].substring(content[4].indexOf('监测值')+3),
          },{
            "title": '阈值:',
            "value": content[5].substring(content[5].indexOf('阈值')+2),
          }]
          console.log(self.cardContent);
        }
        self.isText = false;
        self.isCard = true;
      },
      showText() {
        let self = this;
        self.isText = true;
        self.isCard = false;
      }
    },
    destroyThreeModel() {
      this.cardContent = undefined;
    }
  };
</script>
